<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQstop2</title>
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			$("#start").click(function () {
				$("div").animate({left:"100px"},5000);
				$("div").animate({fontSize:"3em"},5000);

			});
			$("#stop").click(function () {
				$("div").stop();

			});
			$("#stop2").click(function () {
				$("div").stop(true);

			});
			$("#stop3").click(function () {
				$("div").stop(true,true);

			})

		})

	</script>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: #98bf21;
			position: absolute;

		}
	</style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p>开始,按按钮会启动动画</p>
<p>停止,按按钮会停止当前活动的动画,但允许已排队的动画向前执行</p>
<p>停止所有,按按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止.</p>
<p>停止但要完成,会立即完成当前活动的动画,然后停下来.</p>
<div>HELLO</div>

</body>
</html>